3 - Forkify

Forkify-It

Functionalities of the App:

• Search over 10,000 food items and get their recipes.
• Add, Delete and Update the ingredients to your shopping list.
• Mark your favorite recipes and access them anytime.
• Adjust the ingredients based on the servings.

What I learnt -

• Modules in ES6, imports and exports,named and default
• The concept of application state, a simple way of implementing state
• Advanced DOM manipulation
• How to use ES6 template strings to render entire HTML components
• Rendering an AJAX loading spinner
• How to use .closest method for easier event handling
• How and why to use data-* attributes in HTML 5
• Pagination
• how to read data from the page URL
• how to respond to the haschange event
• how to add the same event listener to multiple events
• Using array methods like map,slice,findIndex and includes
• how and why to use eval()
• Implementing event delegation through '.matches'
• Creating unique IDs using an external package
• Difference between array.slice and array.splice
• use case for array.findIndex() and array.find()
• loacl Storage API

Demo of the app -